---
title: ウォーターマーク
icon: Waves
---

<MetaData
  lang="en-US"
  meta={{
    plugins: [{
      client: '@univerjs/watermark',
      facade: '@univerjs/watermark/facade',
    }],
    server: 'No',
  }}
/>

ウォーターマーク機能は、スプレッドシート向けに柔軟かつ安全な透かしソリューションを提供することを目的としています。テキストや画像の透かしをスプレッドシートに追加でき、透かしの見た目や挙動をカスタマイズするための各種設定オプションを提供します。

<PlaygroundFrame lang="en-US" slug="sheets/watermark" clickToShow />

## プリセットモード

ウォーターマークはプリセット自体は提供していませんが、プラグインと組み合わせて使用することができます。

### インストール

```package-install
npm install @univerjs/watermark
```

### 使い方

```typescript
import { UniverWatermarkPlugin } from '@univerjs/watermark' // [!code ++]

import '@univerjs/watermark/facade' // [!code ++]

const { univerAPI } = createUniver({
  // ...
  presets: [
    UniverSheetsCorePreset(),
  ],
  plugins: [
    [UniverWatermarkPlugin, { // [!code ++]
      textWatermarkSettings: { // [!code ++]
        content: 'Hello, Univer!', // [!code ++]
        fontSize: 36, // [!code ++]
      }, // [!code ++]
    }], // [!code ++]
  ],
})
```

## プラグインモード

### インストール

```package-install
npm install @univerjs/watermark
```

### 使い方

```typescript
import { UniverWatermarkPlugin } from '@univerjs/watermark' // [!code ++]

import '@univerjs/watermark/facade' // [!code ++]

const univer = new Univer({
  // ...
})

univer.registerPlugin(UniverWatermarkPlugin, { // [!code ++]
  textWatermarkSettings: { // [!code ++]
    content: 'Hello, Univer!', // [!code ++]
    fontSize: 36, // [!code ++]
  }, // [!code ++]
}) // [!code ++]
```

### プラグインと設定

#### @univerjs/watermark

このプラグインはウォーターマーク機能のコア実装を提供します。開発者はテキストや画像の透かしをアプリケーションに追加でき、透かしの見た目や挙動をカスタマイズするための各種設定オプションを利用できます。`UniverWatermarkPlugin` プラグインを提供します。

参照: [@univerjs/watermark](/reference/packages/plugins/univerjs/watermark)

## Facade API

### ウォーターマークを設定

```typescript
univerAPI.addWatermark('text', { content: 'hello', repeat: true })
```

### ウォーターマークを削除

```typescript
univerAPI.deleteWatermark()
```
